<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>Update Css Skills With <span class="hl ">JS</span></h2>
    <div class="controls">
        <div class="fields">
        <label for="spacing">Spacing</label>
        <!-- 输入控件 html5 提供更加强大的表单类型 -->
        <!-- range 范围选择控件 -->
        <input type="range" min="10" max="200" id="spacing" name="spacing" value="20"
        data-num="120" 
        data-sizing="px"> <span id="spacing__res">20px</span>
        </div>

        <div class="fields">
            <label for="blur">Blur</label>
            <!-- 输入控件 html5 提供更加强大的表单类型 -->
            <!-- range 范围选择控件 -->
            <input type="range" min="10" max="200" id="blur" name="spacing" value="20" 
            data-sizing="px"> <span id="blur__res">20px</span>
        </div>

        <div class="fields">
            <label for="color">Spacing</label>
            <!-- 输入控件 html5 提供更加强大的表单类型 -->
            <!-- range 范围选择控件 -->
            <input type="color"  id="color" name="color"> <span id="color__res">20</span>
        </div>
    </div>
    <script>
        const inputs =document.querySelectorAll('.fields input');
        //数组遍历，并调用执行callback
        inputs.forEach(function(input){
            // console.log(input);
            input.addEventListener('change',function(event){
                // console.log(this);
                const res='#'+this.id+'__res';
                // console.log(res);
                document.querySelector(res).innerText=
                this.value + (this.dataset.sizing ?this.dataset.sizing:'');
            })
        });
        // console.log(inputs);
        // const blurInput=document.querySelector('#blur');
        // blurInput.addEventListener('change',function(event){
        //     console.log(this.value);
            
        //     document.querySelector('#blur__res').innerText = 
        //     this.value+this.dataset.sizing;
        // });

        // const spacingInput=document.querySelector("#spacing");
        // spacingInput.addEventListener('change',function(event){
        //     //js 是事件驱动的语言
        //     //this 在js中最重要的基础
        //     // 若在事件处理函数中，this 指向事件发生的对象
        //     // console.log(event.target.value,this);
        //     console.log(this.value);
            
        //     document.querySelector('#spacing__res').innerText = 
        //     this.value+this.dataset.sizing;
        // });
    </script>
</body>
</html>